<template>
  <div>
    <el-form :inline="true" :model="Cha" class="demo-form-inline">
      <el-form-item label="违章负责人">
        <el-input v-model="Cha.funame"></el-input>
      </el-form-item>
    
    <el-form-item label="违章日期">
        <el-col :span="18">
          <el-form-item prop="date1">
          <el-input type="date" v-model="Cha.riqi"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="维车牌号">
        <el-input v-model="Cha.chepaihao"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="WeizhangPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="Weizhangpidelete()">批量删除</el-button>
    <el-button type="danger" @click="XiaoAdd()">新增</el-button>
    <el-table ref="yingpi" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column label="违章标题" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.biaoti }}</span>
        </template>
      </el-table-column>

    

      <el-table-column label="车牌号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.chepaihao }}</span>
        </template>
      </el-table-column>

    

     

      <el-table-column label="违章人" width="180">
        <template slot-scope="scope">
         
          <span  style="margin-left: 10px">{{ scope.row.weizhangren }}</span>
        </template>
      </el-table-column>
        <el-table-column label="违章日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.riqi }}</span>
        </template>
      </el-table-column>
       <el-table-column label="违章内容" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.neirong }}</span>
        </template>
      </el-table-column>

      <el-table-column label="处罚结果" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.jieguo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.beizhu }}</span>
        </template>
      </el-table-column>
    
     
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="WeizhangEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="WeizhangDelete(scope.row.id)"
            >删除</el-button
          >
        
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="Cha.page"
      :limit.sync="Cha.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="WeizhangPage"
    />
    <!--应收添加-->
    <el-dialog title="提示" :visible.sync="YingAddShow" width="30%">
      <el-form ref="form" :model="XianList" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="违章标题">
              <el-input v-model="XianList.biaoti"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
      

      
        <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号">
              <el-input v-model="XianList.chepaihao"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
        <el-row>
          <el-col :span="12">
            <el-form-item label="违章人" >
              <el-input v-model="XianList.weizhangren"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
       
        <el-row>
          <el-col :span="12">
            <el-form-item label="违章日期">
              <el-input type="date" v-model="XianList.riqi"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="违章内容">
              <el-input v-model="XianList.neirong"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处罚结果">
              <el-input  v-model="XianList.jieguo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="XianList.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

    

        <el-form-item>
          <el-button type="primary" @click="WeizhangBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--应收编辑-->
    <el-dialog title="提示" :visible.sync="YingEintShow" width="30%">
      <el-form ref="form" :model="YingTable" label-width="80px">
       <el-row>
          <el-col :span="12">
            <el-form-item label="违章标题">
              <el-input v-model="YingTable.biaoti"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
      

      
        <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号">
              <el-input v-model="YingTable.chepaihao"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
        <el-row>
          <el-col :span="12">
            <el-form-item label="违章人" >
              <el-input v-model="YingTable.weizhangren"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
       
        <el-row>
          <el-col :span="12">
            <el-form-item label="违章日期">
              <el-input type="date" v-model="YingTable.riqi"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="违章内容">
              <el-input v-model="YingTable.neirong"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处罚结果">
              <el-input  v-model="YingTable.jieguo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="YingTable.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item>
          <el-button type="primary" @click="WeizhangEintBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  WeizhangPages, //查询
  Weizhangpideletes, //批删
  WeizhangDeletes, //单删
  WeizhangBaos, //添加
  WeizhangEdits, //反填
  WeizhangEintBaos, //保存
  
} from "@/api/system_base/Weihu"; //引入apijs
import Pagination from "@/components/Pagination"; // 引入分页组件
export default {
  components: { Pagination },
  data() {
    return {
      YingEintShow: false,
      YingAddShow: false,
      total: 0,
      tableData: [],

      Cha: {
        funame:"",
        riqi: "",
        chepaihao:"",
        page: 1, //当前页
        maxResultCount: 2, //每页几条
        skipCount: 0, //用于api接口  第一条数据位置
      },
      XianList: {
        biaoti: "",
       
        chepaihao: "",
        weizhangren: "",
        riqi: "",
       
       neirong: "",
       jieguo:"",
        beizhu: "",
      },
      YingTable: {
         biaoti: "",
       
        chepaihao: "",
        weizhangren: "",
        riqi: "",
       
       neirong: "",
       jieguo:"",
        beizhu: "",
      },
    };
  },
  created() {
    this.WeizhangPage();
  },
  methods: {
    
    //修改保存
    WeizhangEintBao() {
      if(this.YingTable.biaoti=="")
      {
        this.$message("违章标题不能空");
        return;
      }
     
      if(this.YingTable.chepaihao=="")
      {
        this.$message("车牌号不能空");
        return;
      }
    
      
      if(this.YingTable.weizhangren=="")
      {
        this.$message("违章人不能空");
        return;
      }
      if(this.YingTable.neirong=="")
      {
        this.$message("违章内容不能空");
        return;
      }
       if(this.YingTable.riqi=="")
      {
        this.$message("违章日期不能空");
        return;
      }
      if(this.YingTable.jieguo=="")
      {
        this.$message("处罚结果不能空");
        return;
      }
      if(this.YingTable.beizhu=="")
      {
        this.$message("备注不能空");
        return;
      }
    
      WeizhangEintBaos(this.YingTable).then((r) => {
        this.$message("修改成功");
        this.YingEintShow = false;
        this.WeizhangPage();
      });
    },
    //反填
    WeizhangEdit(id) {
      this.YingEintShow = true;
      WeizhangEdits(id).then((r) => {
          var that=this;
       var aa= r.result;
       that.YingTable=aa;
       that.YingTable.riqi=that.YingTable.riqi.substring(10,0);
       
      });
    },
    //添加保存
    WeizhangBao() {
      
    
     if(this.XianList.biaoti=="")
      {
        this.$message("违章标题不能空");
        return;
      }
     
      if(this.XianList.chepaihao=="")
      {
        this.$message("车牌号不能空");
        return;
      }
    
      
      if(this.XianList.weizhangren=="")
      {
        this.$message("违章人不能空");
        return;
      }
      if(this.XianList.neirong=="")
      {
        this.$message("违章内容不能空");
        return;
      }
       if(this.XianList.riqi=="")
      {
        this.$message("违章日期不能空");
        return;
      }
      if(this.XianList.jieguo=="")
      {
        this.$message("处罚结果不能空");
        return;
      }
      if(this.XianList.beizhu=="")
      {
        this.$message("备注不能空");
        return;
      }
      WeizhangBaos(this.XianList).then((r) => {
        this.$message("添加成功");
        this.YingAddShow = false;
        this.WeizhangPage();
      });
    },
    XiaoAdd() {
       
      this.YingAddShow = true;
      
    },
    //单删
    WeizhangDelete(id) {
      if (confirm("确认要删除吗")) {
        WeizhangDeletes(id).then((r) => {
          this.$message("删除成功");
          this.WeizhangPage();
        });
      }
    },
    //批量删除
    Weizhangpidelete() {
      var arrid = [];
      var id = this.$refs.yingpi.selection;
      id.forEach((r) => {
        arrid.push(r.id);
      });
      if (confirm("确认删除吗")) {
        arrid.forEach((r) => {
          Weizhangpideletes(r).then((r) => {});
          this.$message("批删成功");
          this.WeizhangPage();
        });
      }
    },

    //查询
    WeizhangPage() {
      this.listLoading = true;
      this.Cha.skipCount = (this.Cha.page - 1) * this.Cha.maxResultCount;

      WeizhangPages(this.Cha).then((r) => {
        if (r.result.items != null) {
          var that = this;
          that.tableData = r.result.items;
          this.listLoading = false; // 隐藏加载效果
          this.total = r.result.totalCount;
        }
      });
    },
    ChaWeizhangPage() {
      this.Cha.page = 1;
      this.WeizhangPage();
    },
  },
};
</script>